<template>
  <el-dialog title="个人信息" :visible.sync="dialogVisible"
    @open="handleDialogOpen()" v-loading="loading">
    <div class="hhDiv chatDiv">
                <div id="infoDiv">
                  <el-container>
                    <!--头部-->
                    <el-header>
                      <div id="headDiv">
                        <span><!--{{$store.state.doctor.name}}--></span>
                      </div>
                    </el-header>
                    <el-main id="msgDiv">
                      <div style="padding-left:0px">
                        <el-row v-for="item in chatInfo" :key="item">
                          <!--患对医-->
                          <div  v-show="item.direction==1">
                              <el-col span=2>
                                <!--:src="require('../../img'+$store.state.doctor.tDoctorInfo.headImg)"-->
                                <el-avatar :size="35" ></el-avatar>
                              </el-col>
                              <el-col span=22 style="text-align:left">
                                <div class="fontDiv">
                                  <p>{{item.info}}</p>
                                </div>
                              </el-col>
                          </div>
                        <!--医对患-->
                          <div  v-show="item.direction==0">
                              <el-col span=22 style="text-align:left">
                                <div style="background-color:rgb(142, 255, 127);border-radius: 4px;border: 1px solid white">
                                  <p>{{item.info}}</p>
                                </div>
                              </el-col>
                              <el-col span=2>
                                <!--:src="require('../../img'+$store.state.doctor.tDoctorInfo.headImg)"-->
                                <el-avatar :size="35" ></el-avatar>
                              </el-col>
                          </div>

                        </el-row>

                      </div>
                    </el-main>
                  </el-container>


                </div>
                <div id="sendDiv">
                     <el-input type="textarea" rows="6" v-model="message" >

                     </el-input>
                     <el-button type="success" id="sendBtn" @click="sendMsg()" size="mini">发送</el-button>
                </div>
            </div>
  </el-dialog>
</template>

<script>
export default {
  name: "message-info",
  data() {
    return {
      loading: false,
      /*changePassword: false,
      userModel: {
        id: 0,
        name: '',
        loginName: ''
      },*/
      dialogVisible: false,
    }
  },
  methods:{
    handleDialogOpen() {
      this.$nextTick(() => {
        //this.$refs['personalInfoForm'].clearValidate()
        //this.$refs['username'].focus()
      })
    },
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openMessageInfoDialog', function() {
        //this.loading = true
        this.changePassword = false
        this.dialogVisible = true
      /*  getCurrentUser()
        .then(response => {
          this.userModel = response.data
          this.userModel.password = ''
        })
        .catch(error => {
          this.outputError(error)
        })*/
      })
    })
  }
}
</script>

<style>
.hhDiv ,#headDiv{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
#questDiv{
  /*width: 1000px;*/
  text-align: left;
  padding-left: 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

}
.chatDiv{
  height: 447px;
}
#infoDiv{
  height: 320px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
#sendBtn{
  position: relative;
  right: -280px;
  bottom: 40px;
}
#msgDiv{
  overflow:scroll;
  height: 280px;
}
.fontDiv{
  background-color: white;
  border-radius: 4px;
  border: 1px solid white;
}
.doctorDiv {
     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      height: 430px;
      /*color: aqua;*/
}
</style>
